import React from 'react';
import PropTypes from 'prop-types'; // 引入PropTypes，用于类型检查
// material-ui
import { useTheme } from '@mui/material/styles';
import { Card, CardContent, Grid, Switch, Typography } from '@mui/material';

// ================================|| UI LIST - RADIO ||================================ //

const RadioList = ({ sdm, setSdm, notification, setNotification }) => {
  // 通过props接收数据和函数
  const theme = useTheme();

  return (
    <Card
      sx={{
        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark[800] : theme.palette.primary.light,
        mb: 2,
        mt: 2
      }}
    >
      <CardContent>
        <Grid container spacing={3} direction="column">
          <Grid item>
            <Grid item container alignItems="center" justifyContent="space-between">
              <Grid item>
                <Typography variant="subtitle1">开启免打扰模式</Typography>
              </Grid>
              <Grid item>
                <Switch size="small" color="primary" checked={sdm} onChange={(e) => setSdm(e.target.checked)} name="sdm" />
              </Grid>
            </Grid>
          </Grid>
          <Grid item>
            <Grid item container alignItems="center" justifyContent="space-between">
              <Grid item>
                <Typography variant="subtitle1">接受通知消息</Typography>
              </Grid>
              <Grid item>
                <Switch size="small" checked={notification} onChange={(e) => setNotification(e.target.checked)} name="notification" />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

// PropTypes类型检查
RadioList.propTypes = {
  sdm: PropTypes.bool.isRequired,
  setSdm: PropTypes.func.isRequired,
  notification: PropTypes.bool.isRequired,
  setNotification: PropTypes.func.isRequired
};

export default RadioList;
